<template>
  <!--  -->
  <div class="tt-table">
    <el-table
      :border="border"
      :data="tableData"
      empty-text="暂无数据"
      :span-method="spanMethod"
      :row-key="getRowKey"
      ref="tableCtx"
    >
      <template v-for="(item, index) in tableHeader" :key="index">
        <el-table-column
          v-if="item.type == 'selection'"
          type="selection"
          :width="38"
        />
        <ttTableColumn :item="item" v-else></ttTableColumn>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, watch, computed } from "vue";
import ttTableColumn from "./tt-table-column.vue";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

const props = defineProps({
  tableHeader: {},
  tableData: {
    default: () => {
      return [];
    },
  },
  border: {
    default: false,
  },
  spanMethod: {
    type: Function,
    default: () => {},
  },
  id: {
    default: "id", //唯一标识
  },
  auto: {
    default: true, //开启表单宽度自适应
  },
});

let tableCtx = $ref(null);

function getRowKey(row) {
  if (row[props.id]) {
    return row[props.id];
  } else {
    return "";
  }
}

defineExpose({
  tableCtx,
});
</script>
<style lang="scss" scoped>
.tt-table {
  width: 100%;
  height: 100%;

  &::v-deep(.el-table) {
    height: 100%;

    .el-table__header-wrapper {
      background-color: #f5f7fa;
      border-radius: 4px 4px 0 0;
      overflow: hidden;
    }

    thead {
      tr {
        background: none;
      }

      .el-table__cell {
        background: none;

        .cell {
          text-align: center;
        }
      }
    }
  }
}
</style>
